<template>
  <el-dialog
    v-model="dialogVisible"
    title="宠物资料录入"
    width="60%"
    :with-credentials="true"
  >
    <div style="display: flex; justify-content: center; align-items: center">
      <el-form
        :model="form"
        :inline="true"
        label-width="120px"
        class="customClass"
      >
        <el-form-item label="宠物名称">
          <el-input
            v-model="form.petName"
            placeholder="请输入宠物名称"
            style="width: 180px"
            disabled
          />
        </el-form-item>
        <el-form-item label="宠物年龄">
          <el-input
            v-model="form.age"
            placeholder="请输入宠物年龄"
            style="width: 180px"
            disabled
          />
        </el-form-item>
        <el-form-item label="宠物主人">
          <el-input
            v-model="form.userName"
            placeholder="请输入宠物主人"
            style="width: 180px"
            disabled
          />
        </el-form-item>
        <el-form-item label="宠物性别">
          <el-radio-group v-model="form.sex" disabled>
            <el-radio label="公" />
            <el-radio label="母" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="健康状态">
          <el-select
            v-model="form.health"
            placeholder="请选择宠物健康状态"
            style="width: 180px"
            disabled
          >
            <el-option label="健康" value="0" />
            <el-option label="不健康" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="监护人">
          <el-input
            v-model="form.guardian"
            placeholder="请选择监护人"
            style="width: 180px"
            disabled
          />
        </el-form-item>
        <el-form-item label="流浪状态">
          <el-select
            v-model="form.isStray"
            placeholder="是否流浪"
            style="width: 180px"
            disabled
          >
            <el-option label="否" value="0" />
            <el-option label="是" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="疫苗接种">
          <el-select
            v-model="form.vaccineStatus"
            placeholder="是否接种"
            style="width: 180px"
            disabled
          >
            <el-option label="未接种" value="0" />
            <el-option label="已接种" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="宠物体型">
          <el-select
            v-model="form.description"
            placeholder="请选择宠物体型"
            style="width: 180px"
            disabled
          >
            <el-option label="小型" value="0" />
            <el-option label="中型" value="1" />
            <el-option label="大型" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="地址">
          <el-input
            v-model="form.address"
            placeholder="请输入地址"
            style="width: 180px"
            disabled
          />
        </el-form-item>
      </el-form>
      <div style="width: 20%">
        <el-image
          :src="form.petImage"
          fit="cover"
          style="width: 150px; height: 150px"
        ></el-image>
        <div style="height: 20px"></div>
        <el-image
          :src="form.vaccineImage"
          fit="cover"
          style="width: 150px; height: 150px"
        ></el-image>
      </div>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";

import { getThisUserInfo } from "@/api/user";

const form = reactive<Record<string, any>>({
  petName: "",
  categoryName: "",
  description: "",
  age: "",
  sex: "",
  birthday: "",
  health: "",
  isStray: "",
  vaccineStatus: "",
  vaccineImage: "",
  petImage: "",
  createTime: "",
  updateTime: "",
  guardian: "",
  address: "",
  userName: "",
});

const dialogVisible = ref(false);

const showDialog = (data: Record<string, any>) => {
  getThisUserInfo(data.userId).then((res: any) => {
    form.guardian = res.data.nickName;
  });
  for (let key in data) {
    if (form.hasOwnProperty(key)) {
      form[key] = data[key] + "";
    }
  }
  dialogVisible.value = true;
};

defineExpose({
  showDialog,
});
</script>
<style scoped lang="less">
.dialog-footer .el-button {
  margin-right: 10px;
  margin-top: -20px;
}

.customClass {
  .el-form-item {
    margin-bottom: 30px;
  }
  width: 80%;
}
</style>
